<template>
  <div class="comment" :id="`comment${comment.id}`">
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <div class="comment-head">
      <div class="user-avatar"><img :src="comment.image" alt="" /></div>
      <div class="head-right">
        <section-title>
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <div>
              <span class="from-user user-name">{{ comment.name }}</span>
              <span class="to-user" v-if="comment.fatherId"
                ><span style="margin: 0 5px">@</span
                ><span class="user-name">{{ comment.fatherName }}</span></span
              >
            </div>
            <div style="font-size: 13px">
              <span style="color: #9c9c9c; margin-right: 20px">{{
                comment.createTime
              }}</span>
              <span
                @click.stop=" user.fatherId=comment.id
                user.fatherName=comment.name
                showCommentEditor = true"
                style="cursor: pointer"
                >回复</span
              >
                 <span class="spanClass"
                @click.stop=" user.fatherId=0
                user.fatherName=comment.name
                showCommentEditor = true"
                style="cursor: pointer"
                >回复帖子</span
              >
              
            </div>
          </div>
        </section-title>
      </div>
    </div>
    <div class="comment-body">
      <div class="content-text">
        <p v-html="comment.text"></p>
      </div>
      <div v-if="showCommentEditor" @click.stop="showCommentEditor = true">
        <div class="user-avatar">
          <img class="imagesotu" :src="user.image" />
        </div>
        QQ:<input
          @blur="getName"
          v-on:input="qqinupt"
          v-model="qq"
          placeholder="请输入qq号"
        />
        昵称:<input v-model="user.name" />
        <comment-message-editor
          :inline="true"
          v-model="user.text"
          buttonText="回复"
          @submit="submitReply"
        ></comment-message-editor>
      </div>
      <slot></slot>
    </div>
  </div>
</template>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
import sectionTitle from "@/components/section-title";
import qq from "@/api/qq"
import message from '@/api/message'
import commentMessageEditor from "comment-message-editor";
export default {
  name: "comment",
  props: {
    comment: {
      type: Object,
    },
  },
  data() {
    return {
      showCommentEditor: false,
      user: {
        text: "", //留言内容
        image: "http://q2.qlogo.cn/headimg_dl?dst_uin=1&spec=100", //留言人头像
        name: "", //留言名
        fatherId: 0, //回复人id
        postId: 0,
        fatherName: "", //回复人名
      },
      qq: "",
    };
  },
  watch: {
    showCommentEditor(value) {
      if (value) {
        document.body.addEventListener("click", this.close);
      } else {
        document.body.removeEventListener("click", this.close);
      }
    },
  },
  components: {
    sectionTitle,
    commentMessageEditor,
  },
  methods: {
       stopUser(id){
     showCommentEditor = true
    // console.log(id)
       },
    getName() {
      qq.getQQname(this.qq).then((res) => {
        this.user.name = res.data.qq;
      });
      
    },

    qqinupt() {
      this.user.image =
        "http://q2.qlogo.cn/headimg_dl?dst_uin=" + this.qq + "&spec=100";
    },
    reply(id) {
      const ref = `comment${id}`;
    },
    submitReply(v) {
        this.user.text=v
        this.user.postId= this.$route.params.id;
          //console.log(this.user)
          message.saveMessage(this.user).then(res=>{ 
                this.$router.go(0)
            })
    },
    close() {
      this.showCommentEditor = false;
    },
  },
  created() {

  },
};
</script>

<style scoped lang="less">
.spanClass{
     position: relative;
     left: 50%;
}
.imagesotu {
  position: relative;
}
.comment {
  margin: 20px 0;
}
.comment-head {
  display: flex;
  .head-right {
    flex: 1;
  }
  .user-name {
    color: #8fd0cc;
  }
}
.comment-body {
  padding-left: 80px;
  .content-text {
    /*padding-bottom: 30px;*/
    margin-bottom: 30px;
    font-size: 14px;
    color: #9c9c9c;
    line-height: 1.3rem;
  }
}
.user-avatar {
  width: 50px;
  height: 50px;
  margin-right: 30px;
  img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
  }
}
@media (max-width: 600px) {
  .comment-body {
    padding-left: 15px;
    .content-text {
      margin-top: 10px;
    }
  }
  .user-avatar {
    margin-right: 10px;
  }
}
</style>
